<template>
  <RouterLink to="/main" class="goods-item">
    <el-carousel arrow="never"  indicator-position="outside">
      <el-carousel-item v-for="item in goodsPictureList" :key="item">
        <img :src="'http://localhost:8080'+item" alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- <img :src="'http://localhost:8080'+goods.picture" alt="" /> -->
    <p class="name ellipsis">{{ goods.goodsName }}</p>
    <!-- <p class="desc ellipsis">{{ goods.goodDescription }}</p> -->
    <p class="price">&yen;{{ goods.goodsPrice }}</p>
  </RouterLink>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    goodsPictureList(){
      return this.goods.picture.split(",");
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-carousel__container {
  height: 160px;
}
.goods-item {
  display: block;
  width: 220px;
  padding: 20px 30px;
  text-align: center;
  transition: all 0.3s;
  border: 1px solid #d4d4d4;
  // border-radius: 20px;
  &:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
  }

  img {
    width: 160px;
    height: 160px;
    // border-radius: 10px;
  }

  p {
    padding-top: 10px;
  }

  .name {
    font-size: 16px;
  }

  .desc {
    color: #999;
    height: 29px;
  }

  .price {
    color: orange;
    font-size: 20px;
  }
}
</style>